import { loadModules } from 'esri-loader'

const gis = {
    state: {
        opacity: 100,
        map: undefined,
        view: undefined
    },
    mutations: {
        SET_OPACITY: (state, opacity) => {
            state.opacity = Number(opacity)
        },
        SET_MAP: (state, map) => {
            state.map = map
        },
        SET_VIEW: (state, view) => {
            state.view = view
        },
        DESTROY_MAP: (state) => {
            if (state.gisIns) {
                state.gisIns.destroy()
                state.gisIns = undefined
            }
        }
    },
    actions: {
        INIT_MAP: async ({ commit, state }) => {
            console.log('INIT_MAP', state)
            if (state.map) { return true }
            console.log('new map inst')
            const [esriConfig, TileLayer, Map, Basemap] = await loadModules([
                'esri/config', 'esri/layers/TileLayer', 'esri/Map', 'esri/Basemap', 'esri/views/MapView', 'esri/geometry/Point'
            ])
            const mapUrl = 'http://gxpt.jxsl.gov.cn/arcgis/rest/services/basemap/JXVectorBasemap/MapServer'
            esriConfig.request.interceptors.push({
                urls: mapUrl,
                before: function (params) {
                    if (params.requestOptions.query) {
                        params.requestOptions.query.code = '508d1721220344312933e871e09dc0a6d'
                    } else if (params.requestOptions) {
                        params.url += '&code=' + '508d1721220344312933e871e09dc0a6d'
                    }
                }
            })
            const layer = new TileLayer({
                url: mapUrl
            })
            const basemap = new Basemap({
                baseLayers: [layer],
                title: '影像图'
                // thumbnailUrl: mapImage
            })
            const map = new Map({
                basemap: basemap
            })
            commit('SET_MAP', map)
            return true
        },
        TOOGLE_VIEW: async ({ commit, state }, gis = '0') => {
            // 每次切换工作台 gis的view 层主动刷新
            // 保证卡片拿到的 gis view 是空白
            // const { map } = state.gisIns
            const view = state.view
            if (view) {
                view.map && view.map.removeAll()
                view.map = null
                view.destroy()
            }
            if (gis === '1') {
                const map = state.map
                const [MapView, Point] = await loadModules(['esri/views/MapView', 'esri/geometry/Point'])
                const view = new MapView({
                    container: 'gisContainer',
                    map: map,
                    zoom: 2,
                    center: new Point({
                        x: 116,
                        y: 27,
                        spatialReference: {
                            wkid: 4490
                        }
                    }),
                    constraints: {
                        minZoom: 1,
                        maxZoom: 11
                    }
                })
                view.ui.empty('top-left')
                commit('SET_VIEW', view)
                return view
            }
            return null
        }
    }
}

export default gis
